<template>
<div>
	<p ref="mRef">{{message}}</p>
	<button @click="message='尚硅谷可以提供优质的互联网技术培训'">更新内容</button>
</div>
</template>
<script setup>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
const mRef=ref(null)
const message=ref("欢迎来到尚硅谷")
onBeforeMount(()=>{
	console.log("onBeforeMount",message,mRef.value)
})
onMounted(()=>{
	console.log("onMounted",message,mRef.value)
})
onBeforeUpdate(()=>{
	console.log("onBeforeUpdate")
})
onUpdated(()=>{
	console.log("onUpdated")
})
onBeforeUnmount(()=>{
	console.log("onBeforeUnmount",mRef.value)
})
onUnmounted(()=>{
	console.log("onUnmounted",mRef.value)
})
</script>